/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import * as pick from 'lodash/pick';
import * as omit from 'lodash/omit';
import * as assign from 'object-assign';
import {Renderer, renderChildren, filter} from '../../renderer';
import QuickEditable from '../../hoc/quick-edit';
import PopOverAble from '../../hoc/pop-over';
import DataTip from '../../hoc/data-tip';
import Copyable from '../../hoc/copyable';
const AllowedProps = ['className', 'style', 'onClick', 'onMouseEnter', 'onMouseLeave', 'onKeyDown', 'onKeyUp', 'onKeyPress'];
import {EnhanceAdvance as OnExpression} from '../../hoc/on-expression';

export const TableFieldLayer = ComposedComponent => class TableField extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      data: assign({}, props.data, props.item),
      locals: assign({}, props.locals, props.data, props.item),
    }
  }

  componentWillReceiveProps(nextProps) {
    const props = this.props;

    if (props.data !== nextProps.data || props.item !== nextProps.item) {
      this.setState({
        data: assign({}, nextProps.data, nextProps.item)
      });
    }

    if (props.locals !== nextProps.locals || props.item !== nextProps.item) {
      this.setState({
        locals: assign({}, nextProps.locals, nextProps.data, nextProps.item)
      });
    }
  }

  render() {
    return (
      <ComposedComponent {...this.props} {...this.state} />
    );
  }
};

@Renderer({
  name: 'table-field',
  desc: '...',
  test: /(?:^|\/)table\/field$/
})
@TableFieldLayer
@OnExpression({
  ignoreVisible: true
})
@QuickEditable()
@PopOverAble
@DataTip
@Copyable
export default class TableField extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    type: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    innerClassName: PropTypes.string
  };

  static defaultProps = {
    wrapperComponent: 'td'
  };

  render() {
    const {
      prefix,
      $path,
      affix,
      innerClassName,
      width,
      dataTip,
      body,
      tabIndex,
      wrapperComponent: WrapperComponent,
      colSpan,
      stopClickPropagation
    } = this.props;
    let allowedProps = pick(this.props, AllowedProps);
    let rest = omit(this.props, AllowedProps);
    let style = this.props.style;


    let contents = [
      prefix,
      typeof body === 'undefined' ? renderChildren($path, assign(rest, {
          key: 'sanbox',
          className: innerClassName,
          stopClickPropagation
        })) : body,
      affix
    ];

    if (width && typeof width === 'number' && width > 30) {
      contents = (
        <div style={{width: width - 30}}>
          {contents}
        </div>
      );
    }
    
    return (
      <WrapperComponent {...allowedProps} style={style} data-tip={dataTip || null} tabIndex={tabIndex} colSpan={colSpan}>
        {contents}
      </WrapperComponent>
    );
  }
}
